<script lang="ts" setup>
  import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
  import { echarts, ECOption, graphicColors } from '@/hooks/core/useECharts';
  import { IDataShow } from '@/api/types';
  import { color } from 'echarts';
  import { isDark } from '@/hooks/core/useToggleDark';
  import { useAppSettingStore } from '@/store/module/useAppSettingStore';

  const props = withDefaults(
    defineProps<{ showData: { xAxis: string[]; data: any[]; warningDate: string } }>(),
    {
      //@ts-ignore
      showData: { xAxis: [], data: [], warningDate: '' } as {
        xAxis: string[];
        data: any[];
        warningDate: string;
      },
    }
  );

  let chartInstance: Recordable;
  const showEarlyWarning_ref = ref<HTMLElement>(null!);
  const colorArr1 = [
    'rgba(11, 168, 44, 0.5)',
    'rgba(44, 110, 255, 0.5)',
    'rgba(22, 242, 217, 0.5)',
    'rgba(254, 33, 30, 0.5)',
    'rgba(250, 105, 0, 0.5)',
  ];
  // 全透明的颜色值
  const colorArr2 = [
    'rgba(11, 168, 44, 0)',
    'rgba(44, 110, 255, 0)',
    'rgba(22, 242, 217, 0)',
    'rgba(254, 33, 30, 0)',
    'rgba(250, 105, 0, 0)',
  ];
  let ranInt = Math.floor(
    Math.random() * (isDark.value ? graphicColors.length : colorArr1.length)
  ) as unknown as number;
  const initChart = () => {
    try {
      chartInstance = echarts.init(showEarlyWarning_ref.value);
    } catch (e) {}
    // 对图表初始化配置的控制
    const initOption = {
      color: color,
      // title: {
      //   // text: '▎商家销售统计',
      //   left: 20,
      //   top: 15,
      //   textStyle: {
      //     color: isDark.value ? '#fff' : '#333',
      //   },
      // },
      grid: {
        top: '7%',
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true, // 距离是包含坐标轴上的文字
        // shadowColor: 'rgba(255, 255, 255, 1)',
        // shadowBlur: 10,
        // shadowOffsetX: 5,
        // shadowOffsetY: -5,
        // show: true,
      },
      xAxis: {
        type: 'category',
      },
      yAxis: {
        type: 'value',
        name: '单位（人次）',
        nameTextStyle: {
          color: isDark.value ? '#fff' : '#333',
          fontStyle: 'oblique',
        },
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          show: true,
          type: 'cross',
        },
      },
      z: 0,
      series: [
        {
          type: 'line',
          smooth: true,
          showAllSymbol: true,
          symbol: 'none',
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: isDark.value ? graphicColors[ranInt][0] : colorArr1[ranInt],
              }, // %0的颜色值
              {
                offset: 1,
                color: isDark.value ? graphicColors[ranInt][1] : colorArr2[ranInt],
              }, // 100%的颜色值
            ]),
          },
          itemStyle: {
            color: isDark.value ? graphicColors[ranInt][0] : colorArr1[ranInt],
          },
        },
      ],
    };
    chartInstance.setOption(initOption);
  };
  const screenAdapter = () => {
    const titleFontSize = (showEarlyWarning_ref.value.offsetWidth / 100) * 3;
    // 和分辨率大小相关的配置项
    const adapterOption = {
      title: {
        textStyle: {
          fontSize: titleFontSize,
        },
      },
    };
    chartInstance.setOption(adapterOption);
    // 手动的调用图表对象的resize 才能产生效果
    chartInstance.resize();
  };
  const destroyed = () => {
    window.removeEventListener('resize', screenAdapter);
  };
  const updateECharts = () => {
    const dataOption = {
      // title: {
      //   text: '▎' + props.showData.disName,
      // },
      xAxis: {
        data: props.showData.xAxis,
      },
      series: [
        {
          data: props.showData.data,
          markLine: {
            data: [
              {
                name: '警戒线',
                yAxis: '13500',
                position: 'end',
                lineStyle: {
                  width: 3,
                  type: 'solid',
                },
                label: {
                  show: true,
                  formatter: '警戒线',
                },
              },
              {
                name: '预测值',
                xAxis: props.showData.warningDate,
                position: 'end',
                label: {
                  show: true,
                  formatter: '预测值',
                },
                lineStyle: {
                  width: 3,
                  type: 'dashed',
                },
              },
            ],
          },
        },
      ],
    };
    chartInstance.setOption(dataOption);
  };
  watch(isDark, (value) => {
    ranInt = Math.floor(
      Math.random() * (value ? graphicColors.length : colorArr1.length)
    ) as unknown as number;
    chartInstance.setOption({
      // title: {
      //   textStyle: {
      //     color: value ? '#fff' : '#333',
      //   },
      // },
      yAxis: {
        nameTextStyle: {
          color: isDark.value ? '#fff' : '#333',
        },
      },
      series: [
        {
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: value ? graphicColors[ranInt][0] : colorArr1[ranInt],
              }, // %0的颜色值
              {
                offset: 1,
                color: value ? graphicColors[ranInt][1] : colorArr2[ranInt],
              }, // 100%的颜色值
            ]),
          },
          itemStyle: {
            color: value ? graphicColors[ranInt][0] : colorArr1[ranInt],
          },
        },
      ],
    });
    chartInstance.resize();
  });
  onMounted(() => {
    initChart();
    window.addEventListener('resize', screenAdapter);
    // 在页面加载完成的时候, 主动进行屏幕的适配
    screenAdapter();
    watch(
      () => props.showData,
      () => {
        updateECharts();
      },
      { immediate: true, deep: true }
    );
  });
  onUnmounted(() => {
    destroyed();
  });
  const appSettingStore = useAppSettingStore();
  watch(
    () => appSettingStore.configMenu.collapse,
    () => {
      setTimeout(() => {
        screenAdapter();
      }, 500);
    }
  );
</script>

<!-- 商家销量统计的横向柱状图 -->
<template>
  <div class="enter-y w-full h-full" ref="showEarlyWarning_ref"></div>
</template>

<style lang="scss"></style>
